{include file="public/uheader"}
<div class="detailbox">
    <div class="top">
        <div class="babymsg">
            <img src="{$voter[$apply['user_id']]['avatar']}">
            <div>
                <h3>{$voter[$apply['user_id']]['nickname']}</h3>
                <!--如果是票数将{$apply->getVoterTurnout()}替换成{$apply->poll}-->
                <i class="iconfont icon-toupiao"></i>{$apply->poll}票
            </div>
            <button class="f-right">+加微信</button>
        </div>
        <a  href="" class="circle2"><i class="iconfont icon-guanbi1"></i></a>
        <div class="circle2">
            <h1>{$rank}</h1>
            <span>No</span>
            {if condition="$rank eq 1"}
            <div>
                <img src="/static/index/img/guan.png">
            </div>
            {/if}
        </div>
    </div>
    <div class="top">
        <p class="weixinAudio">
            <audio src="" id="media" width="1" height="1" preload></audio>
            <span id="audio_area" class="db audio_area">
                <span class="audio_wrp db">
                    <span class="audio_play_area">
                        <i class="icon_audio_default"></i>
                        <i class="icon_audio_playing"></i>
                    </span>
                    <span class="db audio_info_area">
                        Ta的参赛宣言
                    </span>
                    <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
                </span>
            </span>
        </p>

        <!-- <div class="voicetap">
            <i class="iconfont icon-luyinshengyin"></i>
        Ta的参赛宣言
        </div> -->
        <div class="picgroup">
            {foreach name="frontRank" item="val"}
            {notempty name="val['rank']"}
                <div class="top{$val['rank']}">
                    <img src="{$val['avatar']}">
                    <span>{$val['rank']}</span>
                </div>
            {else /}
                <div><img src="{$val['avatar']}"></div>
            {/notempty}
            {/foreach}
        </div>
    </div>
    <div class="mid">
        <!--<div class="ho">-->
            <!--<div class="dan">-->
                <!--<img class="danimg" src="/static/index/img/b1.png">-->
                <!--<div class="danfont">-->
                    <!--<p>萌萌的倩妮</p>-->
                    <!--<p>获得了 呆萌小公主 的一个红包</p>-->
                <!--</div>-->
                <!--<div class="danprice">-->
                    <!--<img src="/static/index/img/hong.png">-->
                    <!--+1.5-->
                <!--</div>-->
            <!--</div>-->
            <!--<img src="/static/index/img/hong2.png" class="hongimg">-->
        <!--</div>-->
        <div class="danbox">
        </div>
    </div>
    <span class="danbtn active">
        <i class="iconfont icon-danmu"></i>
    </span>
    <div class="weui-flex bot">
        <div class="weui-flex__item">
            <a href="{:url('/index/index/index', ['activity_id' => $activity['id']])}"><i class="iconfont icon-dibushouye"></i></a>
            <a href="{:url('user/personal', ['activity_id' => $activity['id']])}"><i class="iconfont icon-ren1"></i></a>
        </div>
        <div class="weui-flex__item tou">
            <span class="toupiao" data-id="{$apply['id']}"><span>投</span></span>
        </div>
        <div class="weui-flex__item">
            <a href="javascript:;" class="active lapiao">拉</a>
            <div class="poptip2">
                <p><span>温馨提示：</span>帮TA分享后，产生的投票即可挣得红包佣金哦。您可以在活动结束首在个人中心提现。</p>
                <i class="iconfont icon-guanbi1"></i>
                <span class="triangle trgbo"></span>
                <span class="triangle trgbg"></span>
            </div>
            {if condition="$apply['user_id'] eq $user['id']"}
            <a href="javascript:;" id="pay"><i class="iconfont icon-hongbao"></i></a>
            {else /}
            <a href="{:url('/apply/index', ['acticity_id' => $activity['id']])}" class="active">报</a>
            {/if}
        </div>
    </div>
</div>

<div class="cover">
    <img src="/static/index/img/cover.png" alt="" class="fullimg">
    <i class="iconfont icon-guanbi closebtn2 coverbtn"></i>
</div>
<script type="text/javascript">
    // 背景显示图片
    var apply = {$apply|json_encode};
    var imgData = [];
    imgData[0] = {image: apply.picture};
    if(apply.picture_two != '' && apply.picture_two != null && apply.picture_two != undefined) imgData[1] = {image: apply.picture_two};
    // 显示弹幕
    var bulletScreenData = [];
    var record = {$record|json_encode};
    for(var key in record) {
        bulletScreenData[key] = {id: record[key].type, src: record[key].avatar, name: record[key].nickname};
    }
</script>
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/static/index/js/jquery-weui.min.js"></script>
<script type="text/javascript" src="/static/index/js/layer.js"></script>
<script type="text/javascript" src="/static/index/js/layer/layer.js"></script>
<script type="text/javascript" src="/static/index/js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="/static/index/js/supersized-init.js"></script>
<script type="text/javascript" src="/static/index/js/fastclick.js"></script>
<script type="text/javascript" src="/static/index/js/weixinAudio.js"></script>
<script type="text/javascript" src="/static/index/js/detail.js"></script>
<script type="text/javascript" src="/static/index/js/common.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    $('.weixinAudio').weixinAudio({
        src:apply.record,
    });
    $('.lapiao').on('click',function () {
        $('.cover').fadeIn();
    });
    // 用户拉票
    var signPackage = {$signPackage|json_encode};
    wx.config({
        debug: false,
        appId: signPackage.appId,
        timestamp: signPackage.timestamp,
        nonceStr: signPackage.nonceStr,
        signature: signPackage.signature,
        jsApiList: [
            'onMenuShareAppMessage',
            'onMenuShareTimeline'
        ]
    });
    wx.ready(function () {
        var url = 'http://v.meiyuer.cn/index/detail/activity_id/'+ activity.id + '/apply_id/' + apply.id + '.html';
        var img = 'http://v.meiyuer.cn' + apply.picture;
        wx.onMenuShareAppMessage({
            title: '我是' + apply.baby_name + '编号' + apply.number + ',正在参加' +activity.title + '活动', // 分享标题
            desc: activity.title + ',全民投票时代,你怎么能错过,邀请好友一起来帮他(她)投一票吧', // 分享描述
            link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: img, // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                shareSuccess();
            }
        });

        wx.onMenuShareTimeline({
            title: activity.title, // 分享标题
            link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: img, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
                shareSuccess();
            },
        });
    });
</script>
{include file="public/footer"}



<style type="text/css">
    html {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .db {
        display: block;
    }

    .weixinAudio {
        height: 35px;
        line-height: 35px;
        background:rgba(56,71,140,.7);
        color: #d46aff !important;
        border-radius: 30px;
        padding:1.5% 2%;
        width: 38%;
        font-size: 12px;
        position: relative;
        display: inline-block;
    }

    .audio_area {
        display: inline-block;
        width: 100%;
        vertical-align: top;
        margin: 0px 1px 0px 0;
        font-size: 0;
        position: relative;
        font-weight: 400;
        text-decoration: none;
        -ms-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    .audio_play_area {
        float: left;
        font-size: 0;
        width: 18px;
        height: 25px;
        margin-right: 5%;
    }

    .playing .audio_play_area .icon_audio_default {
        display: block;
    }

    .audio_play_area .icon_audio_default {
        background: transparent url(/static/index/img/iconloop2.png) no-repeat 0 0;
        width: 18px;
        height: 25px;
        vertical-align: middle;
        display: inline-block;
        -webkit-background-size: 54px 25px;
        background-size: 54px 25px;
        background-position: -36px center;
    }

    .audio_play_area .icon_audio_playing {
        background: transparent url(/static/index/img/iconloop2.png) no-repeat 0 0;
        width: 18px;
        height: 25px;
        vertical-align: middle;
        display: inline-block;
        -webkit-background-size: 54px 25px;
        background-size: 54px 25px;
        -webkit-animation: audio_playing 1s infinite;
        background-position: 0px center;
        display: none;
    }

    .audio_area .pic_audio_default {
        display: none;
        width: 18px;
    }

    .tips_global {
        color: #8c8c8c;
    }

    .audio_area .audio_info_area{
        display: inline-block;
        margin-top: 2%;
    }

    .audio_area .progress_bar {
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #fff100;
        height: 2px;
        display: none;
    }

    .playing .audio_play_area .icon_audio_default {
        display: none;
    }

    .playing .audio_play_area .icon_audio_playing {
        display: inline-block;
    }

    @-webkit-keyframes audio_playing {
        30% {
            background-position: 0px center;
        }
        31% {
            background-position: -18px center;
        }
        61% {
            background-position: -18px center;
        }
        61.5% {
            background-position: -36px center;
        }
        100% {
            background-position: -36px center;
        }
    }
</style>
